<template>
  <div class="app-table-group">
    <el-form ref="form" :inline="true" :label-position="'right'" :model="queryForm" size="small">
      <el-form-item label="角色名称" prop="name">
        <el-input v-model="queryForm.name"></el-input>
      </el-form-item>
      <el-form-item label="权限编码" prop="authCode">
        <el-input v-model="queryForm.authCode"></el-input>
      </el-form-item>
      <div style="text-align: right">
        <el-button type="primary" size="small" @click="queryListData">查询</el-button>
        <el-button type="primary" size="small" @click="handlerAdd" plain>新增</el-button>
        <el-button type="primary" size="small" @click="resetQueryForm" plain>重置</el-button>
      </div>
    </el-form>
    <div class="app-table">
      <el-table
          :data="tableData"
          style="width: 100%"
          header-cell-class-name="table-header-cell"
          row-key="id"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        >
        <el-table-column
            prop="name"
            label="角色名称"
        >
        </el-table-column>
        <el-table-column
            prop="authCode"
            label="权限编码"
        >
        </el-table-column>
        <el-table-column
            prop="remark"
            label="备注"
        >
        </el-table-column>
        <el-table-column
            prop="createTime"
            label="创建时间"
        >
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作">
          <template slot-scope="scope">
            <el-button @click="handlerView(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" @click="handlerEdit(scope.row)" size="small">编辑</el-button>
            <el-button v-if="scope.row.status === 0" type="text" @click="handlerDisable(scope.row)" size="small">禁用
            </el-button>
            <el-button v-else type="text" @click="handlerEnable(scope.row)" size="small">启用</el-button>
            <el-button type="text" @click="handlerDelete(scope.row)" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="app-page">
      <el-pagination
          @size-change="pageSizeChange"
          @current-change="pageNumChange"
          :current-page.sync="queryForm.pageNum"
          :page-size.sync="queryForm.pageSize"
          background
          layout="sizes,prev, pager, next"
          :page-sizes="[5, 10, 50]"
          :total="total">
      </el-pagination>
    </div>
    <edit v-if="edit.editToggle" :title="edit.title" :view="edit.view" :primary-key="edit.primaryKey"
          :callback="editCloseCallback"></edit>
  </div>
</template>
<script>
import { getListPage, disable, enable,deleteData} from '@/api/system/role'
import validate from "@/utils/validate";
import Edit from "@/views/system/role/edit";

export default {
  components: {Edit},
  data() {
    return {
      tableData: [],
      total: 0,
      queryForm: {
        name: undefined,
        authCode: undefined,
        pageSize: 10,
        pageNum: 1
      },
      edit: {
        primaryKey: undefined,
        editToggle: false,
        view: false,
        inData:{},
        title: "",
        pageName: "角色",
        optName: "name"
      }
    }
  },
  created() {
    this.queryListData();
  },
  methods: {
    pageSizeChange(val) {
      this.queryForm.pageSize = val;
      this.queryListData();
    },
    pageNumChange(val) {
      this.queryForm.pageNum = val;
      this.queryListData();
    },
    resetQueryForm() {
      for (let key in this.queryForm) {
        if (key !== 'pageSize' && key !== 'pageNum') {
          this.$set(this.queryForm, key, undefined);
        }
      }
    },
    queryListData() {
      for (let name in this.queryForm) {
        let val = this.queryForm[name];
        if (validate.isString(val) && validate.isEmptyString(val)) {
          this.$set(this.queryForm, name, undefined);
        }
      }
      getListPage(this.queryForm).then(response => {
        this.tableData = response.list;
        this.total = response.total;
      })
    },
    editCloseCallback(isModify) {
      if (isModify) {
        this.queryListData();
      }
      this.edit.editToggle = false;
    },
    handlerAdd() {
      this.edit.primaryKey = undefined;
      this.edit.title = "新增" + this.edit.pageName;
      this.edit.view = false;
      this.edit.editToggle = true;
    },
    handlerEdit(row) {
      this.edit.primaryKey = row.id;
      this.edit.title = "修改" + this.edit.pageName;
      this.edit.view = false;
      this.edit.editToggle = true;
    },
    handlerDisable(row) {
      this.$confirm("确认禁用\"" + row[this.edit.optName] + "\"？").then(() => {
        disable(row.id).then(rsp => {
          if (rsp.status === "1") {
            this.$message.success("操作成功!");
            this.queryListData();
          }
        })
      }).catch(() => {})
    },
    handlerEnable(row) {
      this.$confirm("确认启用\"" + row[this.edit.optName] + "\"？").then(() => {
        enable(row.id).then(rsp => {
          if (rsp.status === "1") {
            this.$message.success("操作成功!");
            this.queryListData();
          }
        }).catch(() => {})
      })
    },
    handlerView(row) {
      this.edit.primaryKey = row.id;
      this.edit.title = "查看" + this.edit.pageName;
      this.edit.view = true;
      this.edit.editToggle = true;
    },
    handlerDelete(row){
      this.$confirm("确认删除\"" + row[this.edit.optName] + "\"？").then(() => {
        deleteData(row.id).then(rsp => {
          if (rsp.status === "1") {
            this.$message.success("操作成功!");
            this.queryListData();
          }
        }).catch(() => {})
      })
    }
  }
}
</script>